import { message } from "@/utils/message";
import type { PaginationProps } from "@pureadmin/table";
import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
import { type Ref, ref, reactive, watch, nextTick, onMounted } from "vue";
import { productListApi } from "@/api/purchaseOrderApi";
import { projectSelectApi } from '@/api/projectApi';
import { emitter } from "@/utils/mitt";
export function useColumns(selectRef: Ref, formRef: Ref, tableRef: Ref) {
  const tableData = ref([]);
  const cloneTableData = cloneDeep(tableData.value);
  const selectValue = ref();
  const searchForm = reactive({
    page: 1,
    perPage: 10,
    projectId: null,
    dateRange: null,
    purchaseOrderId: null,
    productName: null,
    productNo: null,
    categoryId: null,
    keyword: null
  });
  const columns: TableColumnList = [
    {
      type: "selection",
      reserveSelection: true,
      align: "left"
    },
    {
      label: "ID",
      prop: "productId",
      width: 50
    },
    {
      label: "所属项目",
      prop: "project.projectName",
      minWidth: 180
    },
    {
      label: "产品名称",
      prop: "productName",
      minWidth: 180
    },
    {
      label: "产品编号",
      prop: "productNo",
      minWidth: 180
    },
    // {
    //   label: "规格",
    //   prop: "productSpec",
    //   minWidth: 120
    // },
    // {
    //   label: "单位",
    //   prop: "productUnit",
    //   minWidth: 90
    // },
    {
      label: "数量",
      prop: "number",
      minWidth: 90
    },
  ];

  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    pageSizes: [10,20,50,100],
    total: 0,
    background: true,
    size: "small"
  });

  const handleSelectionChange = val => {
    console.log(val)
    const arr = [];
    val.forEach(v => {
      arr.push({ label: v.productName, id: v.productId, productNo: v.productNo, productInfo: v });
    });
    selectValue.value = arr;
  };
  const projectSelect = ref()
  onMounted(async() => {
    onSearch();
    const project: any = await projectSelectApi({type: 'all'});
    projectSelect.value = project?.result;
  })
  const loading = ref(false);
  const handleSizeChange = (val: number) => {
    searchForm.page = 1;
    searchForm.perPage = val;
    onSearch()
  }

  const handleCurrentChange = (val: number) => {
    searchForm.page = val;
    onSearch()
  }
  const onSearch = async() => {
    loading.value = true;
    let params = {
      projectId: searchForm.projectId,
      page: searchForm.page,
      perPage: searchForm.perPage,
      createdStartAt: searchForm.dateRange ? searchForm.dateRange[0] + ' 00:00:00' : null,
      createdEndAt: searchForm.dateRange ? searchForm.dateRange[1] + ' 23:59:59' : null,
      purchaseOrderId: searchForm.purchaseOrderId,
      productName: searchForm.productName,
      productNo: searchForm.productNo,
      categoryId: searchForm.categoryId,
      keyword: searchForm.keyword,
    }
    const res: any = await productListApi(params);

    tableData.value = res?.result?.list;
    pagination.total = res?.result?.total;
    pagination.pageSize = res?.result?.perPage*1;
    setTimeout(() => {
      loading.value = false;
    }, 150);
  };

  const onReset = () => {
    formRef.value.resetFields();
    searchForm.page = 1;
    searchForm.projectId = null;
    searchForm.dateRange = null;
    searchForm.purchaseOrderId = null;
    searchForm.productName = null;
    searchForm.productNo = null;
    searchForm.categoryId = null;
    searchForm.keyword = null;
    onClear();
    onSearch()
  };

  const removeTag = ({ id }) => {
    const { toggleRowSelection } = tableRef.value.getTableRef();
    toggleRowSelection(tableData.value.filter(v => v.id == id)?.[0], false);
  };

  const onClear = () => {
    const { clearSelection } = tableRef.value.getTableRef();
    clearSelection();
  };

  const onSure = () => {
    selectRef.value.blur();
    // message(`当前选中的数据为：${JSON.stringify(selectValue.value)}`, {
    //   type: "success"
    // });
    console.log(selectValue.value)
    emitter.emit("projectInfo", selectValue.value);
  };

  watch(
    selectValue,
    async () => {
      await nextTick();
      const { toggleRowSelection } = tableRef.value.getTableRef();
      selectValue.value?.forEach(val => {
        tableData.value?.forEach(row => {
          // 默认回显
          row.id === val ? toggleRowSelection(row) : undefined;
        });
      });
    },
    { immediate: true }
  );

  return {
    searchForm,
    columns,
    pagination,
    selectValue,
    tableData,
    onSure,
    onClear,
    onReset,
    onSearch,
    removeTag,
    handleSelectionChange,
    handleSizeChange,
    handleCurrentChange,
    loading,
    projectSelect
  };
}
